body { display: flex; }

.sidebar
  min-width 240px
  max-width 480px
  width 280px
  display flex
  flex-flow column
  background #f0f0f0
  color #444

  .project-management button
    opacity 0.5
    cursor pointer
    &:hover { opacity: 1; }
    &:disabled { opacity: 0.2; cursor: default; }

.project-management
  display flex
  align-items center
  background rgba(0,0,0,0.65)
  color #eee
  line-height 1

.project-name
  font-weight bold
  padding 1em 0
  flex 1
  text-overflow ellipsis
  white-space nowrap
  overflow-x hidden

.project-buttons, .project-icon
  margin 0 0.5em

  button
    border none
    box-shadow none
    background-color transparent
    background-position center center
    background-repeat no-repeat
    width 30px
    height 30px

  .build { background-image: url(/images/project/build.svg); }
  .stop {background-image: url(/images/project/stop.svg); }
  .debug {background-image: url(/images/project/debug.svg); }
  .run { background-image: url(/images/project/run.svg); }
  .go-to-hub { background-image: url(/images/project/go-to-hub.svg); }

.entries-buttons
  .new-asset { background-image: url(/images/entries/new-asset.svg); }
  .new-folder { background-image: url(/images/entries/new-folder.svg); }
  .rename-entry { background-image: url(/images/actions/rename.svg); }
  .duplicate-entry { background-image: url(/images/actions/duplicate.svg); }
  .trash-entry { background-image: url(/images/actions/delete.svg); }
  .search { background-image: url(/images/actions/search.svg); }
  .filter { background-image: url(/images/actions/filter.svg); }

.filter-buttons {
  flex-wrap: wrap;

  img { padding: 2px; width: 28px; height: 28px; }
  img.toggle-all { content: url(/images/entries/filter-all.svg); }
  img:hover { background: #ccc; }
  img.filtered { opacity: 0.3; }
  img.filtered:hover { opacity: 0.5; }
}

.entries-tree-view {
  flex: 1;
  position: relative;
  overflow-y: auto;
  .tree { position: absolute; }
}

.entries-tree-view .tree, .find-asset-dialog .tree
  li
    color #444

    > img
      width 24px
      height 24px

    &.group
      color #666

    &:not(.selected):hover
      background #e0e0e0

  .name
    white-space pre
    flex 1
    text-overflow ellipsis
    overflow-x hidden

  .badges {
    &:empty { padding: 0; }

    span {
      background: rgba(0,0,0,0.2);
      color: rgba(0,0,0,0.8);
      font-size: 80%;
      margin-left: 0.25em;
    }
  }

.open-in-new-window
  cursor pointer
  align-self stretch
  border none
  box-shadow none
  background-color transparent
  background-position center center
  background-repeat no-repeat
  opacity 0.3

  background-image url(/images/actions/open-in-new-window.svg)
  width 28px

  &:hover
    background-color rgba(0,0,0,0.1)

  &:active
    background-color #fff

.tools
  background rgba(0,0,0,0.1)
  border-top 1px solid #acacac

  ul
    margin 0
    padding 0
    list-style none

  li
    display flex
    align-items center
    height 28px

    &:hover
      background rgba(0,0,0,0.1)
      .name { text-decoration: none; }

    &:active
      background #fff

    div
      flex 1
      display flex
      align-items center

      > img
        width 24px
        height 24px

      .name
        flex 1
        white-space pre
        text-overflow ellipsis
        overflow-x hidden
        padding 0.25em
        text-decoration underline
        cursor pointer

.main {
  flex: 1;
  display: flex;
  flex-flow: column;
  border-top: 1px solid #ccc;

  .top {
    display: flex;
    flex-shrink: 0;
    background: #eee;
    height: 36px;
  }

  .tabs-bar {
    flex: 1;
    background: #eee;
    border-bottom: 1px solid #aaa;
  }

  .panes {
    flex: 1;
    display: flex;

    .pane-container {
      flex: 1;
      display: flex;
      flex-flow: column;

      &:not(.active) { display: none; }

      .revision-outer-container {
        background: rgba(0,0,0,0.1);
        border-bottom: 1px solid #acacac;
        padding: 0.2em;
        display: flex;
      }

      .revision-inner-container {
        margin: auto;
        flex: 1;
        max-width: 600px;
        display: flex;

        span {
          text-transform: uppercase;
          color: #666;
          padding: 0.3em;
          background: #ddd;
        }

        select {
          flex: 1;
          margin: 0 0.5em;
        }
      }
    }

    iframe {
      border: none;
      flex: 1;
      // NOTE: Workaround for Microsoft Edge
      // (iframes seem to ignore flex: 1)
      // Deactivated when revision UI was added
      // min-height: 100%;
    }
  }
}

.top .controls {
  border-bottom: 1px solid #aaa;

  button {
    width: 30px;
    height: 25px;
    border: none;
    box-shadow: none;
    border-radius: 0;
    outline: none;
  }

  .toggle-notifications {
    background: url(/images/controls/notifications-enabled.svg);
    &:hover { background: url(/images/controls/notifications-enabled-hover.svg); }
    &:active { background: url(/images/controls/notifications-enabled-active.svg); }

    &.disabled { background: url(/images/controls/notifications-disabled.svg); }
    &.disabled:hover { background: url(/images/controls/notifications-disabled-hover.svg); }
    &.disabled:active { background: url(/images/controls/notifications-disabled-active.svg); }
  }
}
